<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调知识图谱 - 火灾调查知识库平台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        .graph-container {
            width: 100%;
            height: calc(100vh - 300px);
            min-height: 600px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app">
        <!-- 顶部导航栏 -->
        <nav class="bg-white shadow-md">
            <div class="container mx-auto px-6 py-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <a href="index.html">
                            <img src="logo.png" alt="Logo" class="h-8 w-auto">
                        </a>
                        <span class="ml-3 text-xl font-semibold text-gray-800">火灾调查知识库平台</span>
                    </div>
                    <div class="flex items-center space-x-6">
                        <a href="search.html" class="nav-item"><i class="fas fa-search mr-1"></i>检索</a>
                        <a href="knowledge-graph.html" class="nav-item active"><i class="fas fa-project-diagram mr-1"></i>火调知识图谱</a>
                        <a href="ai-search.html" class="nav-item"><i class="fas fa-robot mr-1"></i>AI检索功能</a>
                        <a href="report.html" class="nav-item"><i class="fas fa-file-alt mr-1"></i>火调报告生成</a>
                        <a href="dashboard.html" class="nav-item"><i class="fas fa-tachometer-alt mr-1"></i>火调大模型驾驶舱</a>
                        <div class="border-l border-gray-300 h-6"></div>
                        <a href="profile.html" class="nav-item"><i class="fas fa-user mr-1"></i>个人中心</a>
                        <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">登录</button>
                        <button class="px-4 py-2 text-sm font-medium text-blue-600 border border-blue-600 rounded-md hover:bg-blue-50">注册</button>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="container mx-auto px-6 py-8">
            <!-- 工具栏 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <el-select v-model="graphTemplate" placeholder="选择图谱模板" class="w-48">
                            <el-option label="火灾调查流程" value="investigation"></el-option>
                            <el-option label="消防设施布局" value="facilities"></el-option>
                            <el-option label="火灾原因分析" value="cause"></el-option>
                            <el-option label="应急处置预案" value="emergency"></el-option>
                        </el-select>
                        
                        <el-button-group>
                            <el-button type="primary" @click="addNode">
                                <i class="fas fa-plus mr-1"></i> 添加节点
                            </el-button>
                            <el-button type="primary" @click="addEdge">
                                <i class="fas fa-link mr-1"></i> 添加关系
                            </el-button>
                            <el-button type="danger" @click="deleteSelected">
                                <i class="fas fa-trash mr-1"></i> 删除
                            </el-button>
                        </el-button-group>

                        <el-button-group>
                            <el-button @click="zoomIn">
                                <i class="fas fa-search-plus"></i>
                            </el-button>
                            <el-button @click="zoomOut">
                                <i class="fas fa-search-minus"></i>
                            </el-button>
                            <el-button @click="resetZoom">
                                <i class="fas fa-expand"></i>
                            </el-button>
                        </el-button-group>
                    </div>

                    <div class="flex items-center space-x-4">
                        <el-button type="success" @click="saveGraph">
                            <i class="fas fa-save mr-1"></i> 保存图谱
                        </el-button>
                        <el-button @click="exportGraph">
                            <i class="fas fa-download mr-1"></i> 导出
                        </el-button>
                    </div>
                </div>
            </div>

            <!-- 分析工具栏 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <div class="flex items-center space-x-6">
                    <div class="flex items-center space-x-2">
                        <span class="text-gray-600">路径分析:</span>
                        <el-input v-model="startNode" placeholder="起点" class="w-32"></el-input>
                        <span class="text-gray-600">到</span>
                        <el-input v-model="endNode" placeholder="终点" class="w-32"></el-input>
                        <el-button type="primary" @click="analyzePath">分析</el-button>
                    </div>

                    <div class="border-l border-gray-300 h-6"></div>

                    <div class="flex items-center space-x-2">
                        <span class="text-gray-600">关系推理:</span>
                        <el-select v-model="reasoningType" placeholder="推理类型" class="w-40">
                            <el-option label="因果关系" value="cause"></el-option>
                            <el-option label="层级关系" value="hierarchy"></el-option>
                            <el-option label="相似关系" value="similarity"></el-option>
                        </el-select>
                        <el-button type="primary" @click="startReasoning">开始推理</el-button>
                    </div>

                    <div class="border-l border-gray-300 h-6"></div>

                    <div class="flex items-center space-x-2">
                        <span class="text-gray-600">图谱统计:</span>
                        <el-button-group>
                            <el-button @click="showNodeStats">节点统计</el-button>
                            <el-button @click="showRelationStats">关系统计</el-button>
                            <el-button @click="showDomainStats">领域分布</el-button>
                        </el-button-group>
                    </div>
                </div>
            </div>

            <!-- 图谱展示区域 -->
            <div class="flex gap-6">
                <!-- 左侧实体列表 -->
                <div class="w-64 bg-white rounded-lg shadow-sm p-4">
                    <h3 class="text-lg font-semibold mb-4">实体类型</h3>
                    <el-tree
                        :data="entityTypes"
                        :props="defaultProps"
                        @node-click="handleNodeClick">
                    </el-tree>
                </div>

                <!-- 中间图谱展示 -->
                <div class="flex-1 bg-white rounded-lg shadow-sm p-4">
                    <div id="graphContainer" class="graph-container"></div>
                </div>

                <!-- 右侧属性面板 -->
                <div class="w-80 bg-white rounded-lg shadow-sm p-4">
                    <template v-if="selectedNode">
                        <h3 class="text-lg font-semibold mb-4">节点属性</h3>
                        <el-form label-position="top">
                            <el-form-item label="名称">
                                <el-input v-model="selectedNode.name"></el-input>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-select v-model="selectedNode.type" class="w-full">
                                    <el-option label="事件" value="event"></el-option>
                                    <el-option label="设备" value="device"></el-option>
                                    <el-option label="人员" value="person"></el-option>
                                    <el-option label="场所" value="location"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input type="textarea" v-model="selectedNode.description" rows="3"></el-input>
                            </el-form-item>
                            <el-form-item label="标签">
                                <el-tag
                                    v-for="tag in selectedNode.tags"
                                    :key="tag"
                                    closable
                                    @close="removeTag(tag)"
                                    class="mr-2 mb-2">
                                    {{ tag }}
                                </el-tag>
                                <el-button size="small" @click="showAddTagDialog">
                                    <i class="fas fa-plus"></i> 添加标签
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                    <template v-else>
                        <div class="text-center text-gray-500 py-8">
                            <i class="fas fa-info-circle text-4xl mb-4"></i>
                            <p>请选择节点查看属性</p>
                        </div>
                    </template>
                </div>
            </div>
        </main>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue
        const app = createApp({
            setup() {
                const graphTemplate = ref('')
                const startNode = ref('')
                const endNode = ref('')
                const reasoningType = ref('')
                const selectedNode = ref(null)

                // 实体类型数据
                const entityTypes = ref([
                    {
                        label: '事件类型',
                        children: [
                            { label: '火灾事故' },
                            { label: '应急处置' },
                            { label: '调查取证' }
                        ]
                    },
                    {
                        label: '设备类型',
                        children: [
                            { label: '消防设备' },
                            { label: '监控设备' },
                            { label: '应急设备' }
                        ]
                    },
                    {
                        label: '人员类型',
                        children: [
                            { label: '调查人员' },
                            { label: '证人' },
                            { label: '专家' }
                        ]
                    }
                ])

                const defaultProps = {
                    children: 'children',
                    label: 'label'
                }

                // 初始化图谱
                let graph = null
                onMounted(() => {
                    const container = document.getElementById('graphContainer')
                    graph = echarts.init(container)
                    
                    const option = {
                        title: {
                            text: '火灾调查知识图谱'
                        },
                        tooltip: {},
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            data: [
                                {
                                    name: '火灾事故',
                                    category: 0,
                                    symbolSize: 50
                                },
                                {
                                    name: '起火点',
                                    category: 1,
                                    symbolSize: 40
                                },
                                {
                                    name: '火灾原因',
                                    category: 1,
                                    symbolSize: 40
                                }
                            ],
                            links: [
                                {
                                    source: '火灾事故',
                                    target: '起火点'
                                },
                                {
                                    source: '火灾事故',
                                    target: '火灾原因'
                                }
                            ],
                            categories: [
                                { name: '事件' },
                                { name: '属性' }
                            ],
                            roam: true,
                            label: {
                                show: true,
                                position: 'right'
                            },
                            force: {
                                repulsion: 100
                            }
                        }]
                    }
                    
                    graph.setOption(option)
                })

                // 方法
                const addNode = () => {
                    console.log('添加节点')
                }

                const addEdge = () => {
                    console.log('添加关系')
                }

                const deleteSelected = () => {
                    console.log('删除选中')
                }

                const zoomIn = () => {
                    console.log('放大')
                }

                const zoomOut = () => {
                    console.log('缩小')
                }

                const resetZoom = () => {
                    console.log('重置缩放')
                }

                const saveGraph = () => {
                    console.log('保存图谱')
                }

                const exportGraph = () => {
                    console.log('导出图谱')
                }

                const analyzePath = () => {
                    console.log('分析路径')
                }

                const startReasoning = () => {
                    console.log('开始推理')
                }

                const showNodeStats = () => {
                    console.log('显示节点统计')
                }

                const showRelationStats = () => {
                    console.log('显示关系统计')
                }

                const showDomainStats = () => {
                    console.log('显示领域分布')
                }

                const handleNodeClick = (data) => {
                    console.log('节点点击', data)
                }

                const removeTag = (tag) => {
                    console.log('移除标签', tag)
                }

                const showAddTagDialog = () => {
                    console.log('显示添加标签对话框')
                }

                return {
                    graphTemplate,
                    startNode,
                    endNode,
                    reasoningType,
                    selectedNode,
                    entityTypes,
                    defaultProps,
                    addNode,
                    addEdge,
                    deleteSelected,
                    zoomIn,
                    zoomOut,
                    resetZoom,
                    saveGraph,
                    exportGraph,
                    analyzePath,
                    startReasoning,
                    showNodeStats,
                    showRelationStats,
                    showDomainStats,
                    handleNodeClick,
                    removeTag,
                    showAddTagDialog
                }
            }
        })

        app.use(ElementPlus)
        app.mount('#app')
    </script>
</body>
</html> 